import Head from 'next/head'
import { useEffect, useState } from 'react'

import Form from '@/components/Form/index'
// import Form from '@/components/EntityForm/index'
import Header from '@/components/Header'
import Home from '@/components/Home/Index'
import HomeDialog from '@/components/HomeDialog/Index'
import HomeDialogMobile from '@/components/HomeDialogMobile/Index'
import HomeMobile from '@/components/HomeMobile/Index'
import Layout from '@/components/Layout'
import locale from '@/locale'
import useLocale from '@/utils/useLocale'

function Index() {
  const t = useLocale(locale)
  const [isHome, setIsHome] = useState<boolean>(true)
  const [visible, setVisible] = useState<boolean>(false)

  const [handleMobile, setHandleMobile] = useState<number>(0)

  useEffect(() => {
    const isUnder = (size = 996) => {
      const html = document.documentElement
      const cliWidth = html.clientWidth
      if (cliWidth >= size) {
        return false
      }
      return true
    }
    // const isMobile = () => {
    //   function isMobileResuit() {
    //     const userAgent = navigator.userAgent
    //     const keywords = ['Android', 'iPhone', 'Windows Phone', 'Mobile', 'Tablet']
    //     for (let i = 0; i < keywords.length; i++) {
    //       if (userAgent.indexOf(keywords[i]) !== -1) {
    //         return true
    //       }
    //     }
    //     return false
    //   }
    //   if (isMobileResuit()) {
    //     return true
    //   } else {
    //     return false
    //   }
    // }
    const handleResize = () => {
      if (isUnder()) {
        setHandleMobile(1)
        return
      }
      setHandleMobile(0)
    }
    handleResize()
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  const homeDialogComponents: { [key: string]: JSX.Element } = {
    0: (
      <HomeDialog
        visible={visible}
        onVisible={setVisible}
        onContinue={(is) => {
          setIsHome(is), setVisible(is)
        }}
      />
    ),
    1: (
      <HomeDialogMobile
        visible={visible}
        onVisible={setVisible}
        onContinue={(is) => {
          setIsHome(is), setVisible(is)
        }}
      />
    ),
  }

  const onSubmit = (is: boolean) => {
    setVisible(is)
  }

  const HomeComponents: { [key: string]: JSX.Element } = {
    0: <Home onSubmit={(is) => onSubmit(is)} key={isHome.toString()} />,
    1: <HomeMobile onSubmit={(is) => setVisible(is)} />,
  }

  return (
    <>
      <Head>
        <title>{t.title}</title>
        <meta property="og:title" content={t.title} key="title" />
      </Head>
      {/* 顶部 */}
      {handleMobile ? (
        <Header show={true} handleMobile={true} onSubmit={(is) => setIsHome(is)} />
      ) : (
        <Header show={!isHome} onSubmit={(is) => setIsHome(is)} />
      )}
      {/* 页面 */}
      {isHome ? (
        HomeComponents[handleMobile.toString()]
      ) : (
        <Form setIsHome={(is) => setIsHome(is)} />
      )}

      {/* 弹窗 */}
      {homeDialogComponents[handleMobile.toString()]}
    </>
  )
}

export default Index

Index.getLayout = function getLayout(page: React.ReactNode) {
  return <Layout>{page}</Layout>
}
